<template>
  <div class="milestones-container">
    <h2>大事记</h2>
	<br>
	<!-- #ifdef APP -->
	<uni-steps :options="milestonesOptions" direction="column" :active="activeStep"></uni-steps>

	<!-- #endif -->
    
	<!-- #ifndef APP -->
	 <el-timeline>
	          <!-- 2023 年 3 月 4 日第一个版本主页 -->
	          <el-timeline-item
			  v-for="item in milestonesOptions"
			  :key="item"
	              :timestamp=item.desc
	              placement="top"
	              type="primary"
	          >
	            {{item.title}}
	          </el-timeline-item>
	        </el-timeline>
			
			

	<!-- #endif -->
	
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义大事记数据
      milestonesOptions: [
        { title: '第一个版本的主页发布', desc: '2023.3.4' },
        { title: '第二个版本的主页发布', desc: '2023.3.6' },
        { title: '重构立项，正式决定重构两年没动的主页', desc: '2025.3.14' }
      ],
      // 定义当前激活步骤，这里假设最后一个步骤为激活状态
      activeStep: 2
    };
  }
};
</script>

<style scoped>
.milestones-container {
  max-width: 800px;
  margin: 0 auto;
}

/* 可以添加一些额外的样式来美化步骤条 */
uni-steps {
  margin-top: 20px;
}
</style>    